<template>
  <div style="">
    <a-table
      :data-source="page.data"
      bordered
      :loading="loading"
      :pagination="{
        pageSize: page.pageSize,
        current: page.pageNo,
        total: page.totals,
      }"
      @change="changeData"
    >
      <p slot="expandedRowRender" slot-scope="record" style="width:1000px;">
        <a-descriptions title="" layout="vertical" :column="1">
          <a-descriptions-item label="钱包地址" v-if="record.walletInfo">
            <div style="max-width: 100%; word-break: break-all">
              {{ record.walletInfo.address }}
              <a-icon type="copy" @click="copy(record.walletInfo.address)"/>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="Keystore" v-if="record.walletInfo">
            <div style="max-width: 100%; word-break: break-all">
              {{ JSON.stringify(JSON.parse(record.walletInfo.keystore), null, 4) }}
              <a-icon type="copy" @click="copy(record.walletInfo.keystore)"/>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="备注">
            {{ record.note }}
          </a-descriptions-item>
        </a-descriptions>
      </p>
      <a-table-column
        key="userName"
        data-index="userName"
        title="用户名称"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.userName }}
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="loginName"
        data-index="loginName"
        title="登录名称"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.loginName }}
          </span>
        </template>
      </a-table-column>
      <a-table-column
        key="userType"
        data-index="userType"
        title="用户类别"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span v-if="record.userType === 'OPERATOR'">一般用户</span>
          <span v-else>管理员</span>
        </template>
      </a-table-column>
      <a-table-column
        key="createTime"
        data-index="createTime"
        title="创建时间"
        width="100"
        align="center"
        ellipsis
      >
        <template slot-scope="text, record">
          <span>
            {{ record.createTime }}
          </span>
        </template>
      </a-table-column>

    </a-table>
  </div>
</template>

<script>
import Constant from "../utils/Constant";
import Mixin from "../components/Mixin.vue";
export default {
  mixins: [Mixin],
  data() {
    return {
      authorization: "",
      userType: 1,
      loading: false,
      page: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
        totals: 0,
        data: [],
      },
    };
  },
  created() {
    console.log("created");
    this.authorization = localStorage.getItem("authorization");
    this.userType = localStorage.getItem("userType");
    this.getUserInfos(this.page.pageNo);

  },
  methods: {
    getUserInfos(pageNo) {
      let headers = {};
      headers.headers = { authorization: this.authorization };
      let url = Constant.ACCOUNT_USERINFOS_URL + pageNo;
      url += "?pageSize=" + this.page.pageSize;
      this.loading = true;
      this.$http.get(url, headers).then(
        (resp) => {
          // console.log(resp);
          if (resp.data.code === "01") {
            this.page.data = resp.data.result.content;
            this.page.pageNo = resp.data.result.pageable.pageNumber + 1;
            this.page.pageSize = resp.data.result.pageable.pageSize;
            this.page.pages = resp.data.result.totalPages;
            this.page.totals = resp.data.result.totalElements;

            // console.log(this.page);
            this.loading = false;

          } else {
            this.$message.error(resp.data.message)
          }
        },
        (err) => {
          console.log(err);
          this.loading = false;
        }
      );
    },
    changeData(data) {
      // console.log(data);
      this.getUserInfos(data.current);
    },
    handleClick(e) {
      console.log("click ", e);
    },
  },
};
</script>
